<template>
<div>
    <div class="plank" v-for="(item,index) in store" :key="index" >
        <div class="store">
            <div class="avatar">
                <img style="height: 100%;width: 100%;" v-lazy="item.avatar" >
            </div>
            <div class="info">
                <div class="title">
                    <p style="margin: .1rem 0">{{ item.title }}</p>
                    <p style="margin: .1rem 0">粉丝数: 0人</p>
                </div>
                <div style="text-align: center;line-height: 48px">
                    <van-button size="small" @click="getstores(item)" style="background-color: #F93F24;color: white;border-radius: 2px;">进店逛逛</van-button>
                </div>
            </div>
        </div>
        <div class="clearfix" style="margin-bottom: 5px;padding: 0 5px">
            <div class="l">商铺推荐</div>
            <div class="r" @click="getstores(item)">
                查看全部 <van-icon name="arrow" /> 
            </div>
        </div>
        <div v-if="item.good.length != 0">
            <div class="goods">
            <div v-for="(items,index) in item.good" :key="index" @click="getDetails(items,item)">
                <div class="avatar">
                    <img v-lazy="items.avatar">
                </div>
                <div class="title">
                    {{ items.sort_title }}
                </div>
                <div class="money">
                    ¥ {{ items.price }}
                </div>
            </div>
        </div>
        </div>
        <div v-else >
            <p class="shadow" style="font-size: 1rem;text-align: center">暂无商品</p>
        </div>
        
    </div>
</div>
</template>
<script>
export default {
    name:'MerchantGoods',
    props:{
        store: null
    },
    data(){
        return {
            
        }
    },
    mounted(){
       
    },
    methods : {
        getstores(item){
            this.$emit('getStore',item)
        },
        getDetails(items,item){
            this.$emit('getProductMerchant', items,item)
        }
    }
}
</script>
<style scoped lang="less">
.plank {
    padding: 5px 7px;
    .store {
        display: grid;
        grid-template-columns: 50px 1fr;
        grid-template-rows: auto;
        padding: 5px 7px;
        .avatar {
            height: 50px;
            width: 50px;
            border-radius: 50%;
            overflow: hidden;
            img {
                height: 100%;
                width:100%
            }
        }
        .title {
            height: 48px;
            font-size: 14px;
            line-height: 24px;
        }
        .info {
            display: grid;
            grid-template-columns: auto 80px;
            grid-template-rows: auto;
            padding-left: 4px;
            .title p {
                padding-left: 4px;
            }
        }
    }

    .goods {
        width: 100%;
        display: grid;
        grid-template-columns: 33.33% 33.33% 33.33%;
        grid-template-rows: auto;
        .avatar {
            border-radius: 2px;
            padding: 2px;
        }
        .money {
            margin: .25rem 0;
            color: #e93b3d;
        }
        .title {
            max-height: 48px;
            font-size: 14px;
            line-height: 24px;
            word-break: break-all;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    }
    
    .goods .avatar img {
        width: 100%;
        height: 100%;
        margin: 0 auto;
        border-radius: 4px;
    }
    .goods-info .title {
        margin: .1rem 0;
    }
    .plank-header {
    padding: 0 7px;
    }
}

@media screen and (max-width: 321px){
    .goods .avatar {
        width: 103px;
        height: 103px;
        margin: 0 auto;
    }
}

@media screen and(min-width: 325px) and (max-width: 380px){
   .goods .avatar {
        width: 113px;
        height: 113px;
        margin: 0 auto;
    }
}

@media screen and (min-width: 380px) and (max-width: 450px){
    .goods .avatar {
        width: 123px;
        height: 123px;
        margin: 0 auto;
    }
}



</style>